<!-- 病患分布详情弹窗 -->
<template>
  <div class="PopTeamDetail-wrap com-pop-wrap" v-if="showDeatil">
    <div class="pop-inner">
      <div class="pop-head">
        <div class="tit">应急队伍详情</div>
        <div class="close" @click="closePop">×</div>
      </div>
      <div class="pop-body">
        <div class="pop-infos">
          <div class="infos">
            <div class="item">
              <div class="title">队&emsp;&emsp;长：</div>
              <div class="content">
                <div v-if="popData.captain == null && popData.telephone == null">
                  暂无数据
                </div>
                <div>{{ popData.captain }}</div>
                <div v-if="popData.captain != null && popData.telephone != null">|</div>
                <div v-show="popData.telephone != null">
                  {{ popData.telephone }}
                  <i class="tel-call" @click="showTelCall()"></i>
                </div>
              </div>

            </div>
            <div class="item">
              <div class="title">负责区域：</div>
              <div class="content" v-if="popData.chargearea == null">
                  暂无数据
              </div>
              <div class="content" v-else>{{ popData.chargearea }}</div>
            </div>
            <div class="item">
              <div class="title">人&emsp;&emsp;数：</div>
              <div class="content" v-if="popData.personnum == null">
                  暂无数据
              </div>
              <div class="content" v-else>
                <em class="yellow">{{ popData.personnum }}</em>人
              </div>
            </div>
            <div class="item">
              <div class="title">外科人数：</div>
              <div class="content" v-if="popData.surgery == null">
                  暂无数据</div>
              <div class="content" v-else>
                <em>{{ popData.surgery }}</em>人
              </div>
            </div>
            <div class="item">
              <div class="title">内科人数：</div>
              <div class="content" v-if="popData.medicine == null">暂无数据</div>
              <div class="content" v-else>
                <em>{{ popData.medicine }}</em>人
              </div>
            </div>
            <div class="item">
              <div class="title">疾控人数：</div>
              <div class="content" v-if="popData.cdc == null">
                  暂无数据
              </div>
              <div class="content" v-else>
                <em>{{ popData.cdc }}</em>人
              </div>
            </div>
            <div class="item">
              <div class="title">护士人数：</div>
              <div class="content" v-if="popData.nurse == null">
                  暂无数据
              </div>
              <div class="content" v-else>
                <em>{{ popData.nurse }}</em>人
              </div>
            </div>
            <div class="item">
              <div class="title">队伍类型：</div>
              <div class="content">{{ teamType[popData.areaflag].name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <pop-tel-call></pop-tel-call>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
import PopTelCall from "@/components/common/gisPop/PopTelCall.vue";
import { messsageBus } from "../../../util/message";
import YjwzfbStore from "@/store/wsyj/YjdwfbModule/YjdwfbStore";

@Component({
  name: "PopTeamDetail",
  components: {
    PopTelCall
  }
})
export default class PopBhDetail extends Vue {
  private teamType = [
    {
      name: ""
    },
    {
      name: "当地队伍"
    },
    {
      name: "地方队伍"
    },
    {
      name: "部队队伍"
    }
  ];
  private closePop() {
    YjwzfbStore.state.showDeatil = false;
    YjwzfbStore.state.showTelCall = false;
  }
  get showDeatil() {
    return YjwzfbStore.state.showDeatil;
  }
  private showTelCall() {
    const telephone: any = YjwzfbStore.state.popData.telephone;
    if (telephone == "" || telephone == undefined || telephone == null) {
      this.$message.warning("无电话号码。");
    } else {
      YjwzfbStore.state.showTelCall = true;
      (messsageBus as any).$emit("callPhone", event);
    }
  }
}
</script>
<style lang="less" scoped>
.PopTeamDetail-wrap {
  position: absolute;
  top: -150px;
  right: 20px;
  width: 413px;
  height: 414px;
  background: url("../../../assets/img/panel/gisUI/pop-inner_bg.png") no-repeat
    0 0;
  background-size: 100% 100%;
  padding: 20px;
  .pop-inner {
    color: #c2e7f2;
    font-size: 18px;
    .pop-head {
      padding: 17px 15px;
    }
    .pop-body {
      padding: 10px 15px 15px;
      height: calc(100% - 54px);
      overflow-y: auto;
    }
  }

  .tel-call {
    display: inline-block;
    position: relative;
    top: 0;
    width: 30px;
    height: 30px;
    background: url("../../../assets/img/panel/gisUI/phone.png") no-repeat 0 0;
    vertical-align: middle;
    cursor: pointer;
  }
  .infos {
    .item {
      margin: 14px 0;
      width: 100%;
      display: flex;
      .title {
        width: 90px;
        text-align: right;
       /* text-align-last: justify;
        text-align: justify;
        text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器*/
      }
      .content{
        width: calc(100% - 90px);
        padding-left: 10px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        word-break: break-all;
        em {
          font-size: 22px;
          font-style: normal;
          padding-right: 5px;
          box-sizing: border-box;
          color: #1dfe8d;
          &.yellow {
            color: #ffb81e;
          }
        }
      }
      .red {
        color: red;
      }
    }
  }



}


::-webkit-scrollbar{
  width: 4px;
  height:4px;
  background-color:rgba(0,0,0,.0);
}
::-webkit-scrollbar-thumb{
  width: 3px;
  border-radius: 3px;
  background-color: rgba(200,200,200,0.8);


}


</style>
